<template>
	<view class="fl-s-s p-r-30">
		<u-sticky bgColor="#FFFFFF" class="w-1">
			<view class="fr-s-s w-1" style="background: #FFFFFF; flex-wrap: wrap;">
				<view @click="changeLabel(index)" :class="curlabel==index?'item-act':'label-item'" class="m-r-20 m-b-20 fr-c" v-for="(item,index) in labelTabs" :key="index">{{item.text}}({{item.num}})</view>
			</view>
		</u-sticky>
		<view class="w-1">
			<view class="comment-item w-1" v-for="(item,index) in 3" :key="index" @click="toComment">
				<!-- 头像 星级 时间 -->
				<view class="fr-s-c w-1">
					<image src="/static/logo.png" mode="aspectFill" class="circle" style="width: 56rpx; height: 56rpx;"></image>
					<view class="flex-1 fl-c-s m-l-20">
						<view class="fr-b-c w-1 fm-ali" >
							<text class="fs-20 c-66">张*f期</text>
							<text class="fs-22 c-99">2021-12-03</text>
						</view>
						<view class="fr-s-c" style="margin-top: 5rpx;">
							<image v-for="item in 2" :key="this" class="m-r-10" src="/static/images/home/comment_stars.png" style="width: 19rpx; height: 19rpx;"></image>
							<image v-for="item in 3" :key="this"  class="m-r-10" src="/static/images/home/comment_star.png" style="width: 19rpx; height: 19rpx;"></image>
						</view>
					</view>
				</view>
				<!-- 文字内容 -->
				<text style="word-break: break-all;" class="m-t-30 fs-26 c-66 fm-ali">Shop Japan(ショップジャパン), 不二貿易(Fujiboeki), 西川(Nishikawa) 促销</text>
				<!-- 图片 -->
				<view class="fr-s-s w-1 m-t-30" style="flex-wrap: wrap;">
					<image src="/static/logo.png" v-for="item in 5" :key="this" mode="aspectFill" class="comment-image"></image>
				</view>
				<!-- 回复区 -->
				<view class="reply-box w-1 m-t-20">
					<view class="fr-s-s">
						<text class="c-faa fm-ali fs-24">商家回复：<text class="c-99 fm-ali fs-24">感谢亲的评价😊小店会用心做产品，期待您的再次光临！</text></text>
					</view>
					<view class="fr-s-s m-t-20">
						<text class="c-33 fm-ali fs-24">用户回复：<text class="c-99 fm-ali fs-24">好用吗，好用我就下单了</text></text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				labelTabs:[
					{
						text:'全部评价',
						num:'99+'
					},{
						text:'有图',
						num:'10+'
					},{
						text:'好评',
						num:'82'
					},{
						text:'差评',
						num:1
					}
				],
				curlabel:0
			}
		},
		methods: {
			changeLabel(index){
				this.curlabel = index
			},
			toComment(){
				uni.navigateTo({
					url:'/pages/Home/GoodsDetail/Comment/ReplyComments/ReplyComments'
				})
			}
		}
	}
</script>

<style>
.label-item{
	padding: 0 22rpx;
	height: 60rpx;
	background: rgba(250, 54, 10, 0.1);
	border-radius: 32rpx;
	font-size: 24rpx;
	font-family: Alibaba;
	color: #666666;
}
.item-act{
	padding: 0 22rpx;
	height: 60rpx;
	background: rgba(250, 54, 10, 0.1);
	border-radius: 32rpx;
	border: 2rpx solid #FA360A;
	font-size: 24rpx;
	font-family: Alibaba;
	color: #FA360A;
}
.comment-item{
	padding: 28rpx 0;
	border-bottom: 2rpx solid #F4F4F4;
}
.comment-image{
	width: 164rpx;
	height: 166rpx;
	border-radius: 8rpx;
	margin-right: 10rpx;
	margin-bottom: 10rpx;
}
.reply-box{
	background: #F4F4F4;
	border-radius: 16rpx;
	padding: 28rpx 32rpx;
}
</style>
